<template>
  <div>
    <div style="float: right;margin-right:2%;">
      <div style="position: relative;display: inline-block;">
        <span>省/直辖市名称：</span>
        <el-input style="width: 200px;" @keydown.enter.native="sxNotice" placeholder="请输入省/直辖市名称" v-model="cityNameT">
        </el-input>&nbsp;&nbsp;
      </div>
      <el-button style='margin: 10px 0;' size="mini" type="primary" icon="document" @click="sxNotice">刷新</el-button>
      <el-button style='margin: 10px 0;' :disabled="!isAuth('citys:add')" size="mini" type="primary"
        icon="document" @click="addNotice">添加</el-button>
    </div>
    <el-table :data="tableData.records" style="width: 100%" row-key="id" border lazy :load="load"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column fixed prop="id" label="编号" width="120">
      </el-table-column>
      <el-table-column prop="cityName" label="名称" width="200">
      </el-table-column>
      <el-table-column prop="agentUserId" label="代理用户ID">
      </el-table-column>
      <el-table-column prop="baseKilometres" label="基础公里数">
      </el-table-column>
      <el-table-column prop="baseMoney" label="基础价格">
      </el-table-column>
      <el-table-column prop="unitOverMoney" label="额外每公里价格(单位:元)">
      </el-table-column>
      <el-table-column prop="nightMoney" label="每公里费用(22:00~23:59)">
      </el-table-column>
      <el-table-column prop="earlyMoney" label="每公里费用(00:00~06:59)">
      </el-table-column>
      <el-table-column prop="minuteMoney" label="每分钟时长费(单位:元)">
      </el-table-column>
      <el-table-column prop="pingRate" label="平台抽成比例(0.1表示10%)">
      </el-table-column>
      <el-table-column prop="riderRate" label="师傅默认佣金比例">
      </el-table-column>
      <el-table-column prop="agentTime" label="设置|取消代理时间" v-if="isAuth('citys:shezhidaili')">
      </el-table-column>
      <el-table-column prop="waitMinuteMoney" label="等待每分钟价格">
      </el-table-column>
      <el-table-column prop="freeWaitTime" label="免费等待时长(分钟)">
      </el-table-column>
      <el-table-column prop="sort" label="排序">
      </el-table-column>
      <el-table-column prop="isEnable" label="是否启用" fixed="right">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.isEnable" @change="change2(scope.row.isEnable,scope.row)"
            :active-value="openValue" :inactive-value="closeValue" active-color="#13ce66" inactive-color="#ff4949">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" :disabled="!isAuth('citys:update')"
            @click="amendBanner(scope.row)">修改
          </el-button>
          <el-button size="mini" type="danger" :disabled="!isAuth('citys:delete')"
            @click="deletes(scope.row)">删除
          </el-button>
          <el-button size="mini" type="warning" v-if="isAuth('citys:shezhidaili')&&scope.row.parentId!=0&&!scope.row.agentUserId&&scope.row.hasChildren"  style="margin: 3px;"
            @click="shezhiBtn(scope.row)">设置代理
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <div style="text-align: center;margin-top: 10px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 20, 30, 50, 100]" :page-size="limit" :current-page="page"
        layout="total,sizes, prev, pager, next,jumper" :total="tableData.total">
      </el-pagination>
    </div> -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" center>

      <div v-if="title=='添加'">
        <div style="margin-bottom: 10px;position: relative;">
          <span style="width: 200px;display: inline-block;text-align: right;position: absolute;">等级：</span>
          <el-radio-group v-model="radio" style="width: 100%;margin-left: 200px;">
            <el-radio :label="0">省/直辖市</el-radio>
            <el-radio :label="1">市</el-radio>
            <el-radio :label="2">区/县</el-radio>
          </el-radio-group>
        </div>
        <div style="margin-bottom: 10px;" v-if="radio==1||radio==2">
          <span style="width: 200px;display: inline-block;text-align: right;">省/直辖市：</span>
          <el-select v-model="provinceId" style="width:50%;" @change="select()">
            <el-option v-for="item in provinceList" :key="item.id" :label="item.cityName" :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div style="margin-bottom: 10px;" v-if="radio==2">
          <span style="width: 200px;display: inline-block;text-align: right;">市：</span>
          <el-select v-model="cityId" style="width:50%;">
            <el-option v-for="item in cityList" :key="item.id" :label="item.cityName" :value="item.id">
            </el-option>
          </el-select>
        </div>
      </div>

      <div style="margin-bottom: 10px;">
        <span style="width: 200px;display: inline-block;text-align: right;">名称：</span>
        <el-input style="width:50%;" v-model="cityName" placeholder="请输入名称"></el-input>
      </div>
      <div style="margin-bottom: 10px;">
        <span style="width: 200px;display: inline-block;text-align: right;">排序：</span>
        <el-input style="width:50%;" v-model="sort" placeholder="请输入排序"
          onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"></el-input>
      </div>
      <div style="margin-bottom: 10px;" v-if="parentId!=0">
        <span style="width: 200px;display: inline-block;text-align: right;">基础公里数：</span>
        <el-input style="width:50%;" v-model="baseKilometres" placeholder="请输入基础公里数"></el-input>
      </div>
      <div style="margin-bottom: 10px;" v-if="parentId!=0">
        <span style="width: 200px;display: inline-block;text-align: right;">基础价格：</span>
        <el-input style="width:50%;" v-model="baseMoney" placeholder="请输入基础价格"></el-input>
      </div>
      <div style="margin-bottom: 10px;" v-if="parentId!=0">
        <span style="width: 200px;display: inline-block;text-align: right;">额外每公里价格(单位:元)：</span>
        <el-input style="width:50%;" v-model="unitOverMoney" placeholder="请输入额外每公里价格(单位:元)"></el-input>
      </div>
      <div style="margin-bottom: 10px;" v-if="parentId!=0">
        <span style="width: 200px;display: inline-block;text-align: right;">每公里费用(22:00~23:59)：</span>
        <el-input style="width:50%;" v-model="nightMoney" placeholder="请输入每公里费用(22:00~23:59)"></el-input>
      </div>
      <div style="margin-bottom: 10px;" v-if="parentId!=0">
        <span style="width: 200px;display: inline-block;text-align: right;">每公里费用(00:00~06:59)：</span>
        <el-input style="width:50%;" v-model="earlyMoney" placeholder="请输入每公里费用(00:00~06:59)"></el-input>
      </div>
      <div style="margin-bottom: 10px;" v-if="parentId!=0">
        <span style="width: 200px;display: inline-block;text-align: right;">每分钟时长费(单位:元)：</span>
        <el-input style="width:50%;" v-model="minuteMoney" placeholder="请输入每分钟时长费(单位:元)"></el-input>
      </div>
      <div style="margin-bottom: 10px;" v-if="parentId!=0">
        <span style="width: 200px;display: inline-block;text-align: right;">平台抽成比例(0.1表示10%)：</span>
        <el-input style="width:50%;" v-model="pingRate" placeholder="请输入平台抽成比例(0.1表示10%)"></el-input>
      </div>
      <div style="margin-bottom: 10px;" v-if="parentId!=0">
        <span style="width: 200px;display: inline-block;text-align: right;">师傅默认佣金比例：</span>
        <el-input style="width:50%;" v-model="riderRate" placeholder="请输入师傅默认佣金比例"></el-input>
      </div>
      <div style="margin-bottom: 10px;" v-if="parentId!=0">
        <span style="width: 200px;display: inline-block;text-align: right;">等待每分钟价格：</span>
        <el-input style="width:50%;" v-model="waitMinuteMoney" placeholder="请输入等待每分钟价格"></el-input>
      </div>
      <div style="margin-bottom: 10px;" v-if="parentId!=0">
        <span style="width: 200px;display: inline-block;text-align: right;">免费等待时长(分钟)：</span>
        <el-input style="width:50%;" v-model="freeWaitTime" placeholder="请输入免费等待时长(分钟)"></el-input>
      </div>
	  <div style="margin-bottom: 10px;" v-if="parentId!=0">
	    <span style="width: 200px;display: inline-block;text-align: right;">同步师傅分佣比例：</span>
	  				<el-radio-group v-model="isCover">
	  				  
	  				  <el-radio :label="1">是</el-radio>
	  					<el-radio :label="0">否</el-radio>
	  				</el-radio-group>
	    <!-- <el-input style="width:50%;" v-model="isCover" placeholder="请输入是否修改代理城市下所有骑手的分佣比例"></el-input> -->
	  </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addNoticeTo()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="代理管理员" :visible.sync="dialogFormVisibleDl" center>
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      	<el-form-item>
      		<el-input v-model="dataForm.userName" placeholder="用户名" clearable></el-input>
      	</el-form-item>
      	<el-form-item>
      		<el-button @click="getDataList()">查询</el-button>
      	</el-form-item>
      </el-form>
      <el-table :data="dataList" border v-loading="dataListLoading"
      	style="width: 100%;">
      	<el-table-column type="selection" header-align="center" align="center" width="50">
      	</el-table-column>
      	<el-table-column prop="userId" header-align="center" align="center" width="80" label="ID">
      	</el-table-column>
      	<el-table-column prop="username" header-align="center" align="center" label="用户名">
      	</el-table-column>
      	<el-table-column prop="email" header-align="center" align="center" label="邮箱">
      	</el-table-column>
      	<el-table-column prop="mobile" header-align="center" align="center" label="手机号">
      	</el-table-column>
      	<el-table-column prop="province" header-align="center" align="center" label="省份">
      	</el-table-column>
      	<el-table-column prop="city" header-align="center" align="center" label="代理城市">
      		<template slot-scope="scope">
      			<span  v-if="scope.row.city" >{{scope.row.city}}</span>
      			<span v-else> - </span>
      		</template>
      	</el-table-column>
      	<el-table-column prop="status" header-align="center" align="center" label="状态">
      		<template slot-scope="scope">
      			<el-tag v-if="scope.row.status === 0" size="small" type="danger">禁用</el-tag>
      			<el-tag v-else size="small">正常</el-tag>
      		</template>
      	</el-table-column>
      	<el-table-column prop="createTime" header-align="center" align="center" width="180" label="创建时间">
      	</el-table-column>
      	<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
      		<template slot-scope="scope">
      			<el-button :disabled="!isAuth('sys:user:update')" type="text" size="small"
      				@click="querenshezhi(scope.row.userId)">确认</el-button>
      		</template>
      	</el-table-column>
      </el-table>
      <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
      	:page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
      	layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        page: 1,
        limit: 10,
        size1: 10,
        page1: 1,
        tableDataLoading: true,
        dialogFormVisible: false,
        tableData: [],
        redPacketMoney: '',
        memberImg: '',
        isEnable: 1,
        money: '',
        redPacketNum: '',
        id: '',
        title: '添加',
        openValue: 2,
        closeValue: 1,
        tableDataY: {},
        price: '',
        memberId: '',
        cityName: '',
        couponId: '',
        couponName: '',
        sort: '',
        payClassifyId: '',
        dialogFormVisible4: false,
        radio: 0,
        provinceId: '',
        cityId: '',
        provinceList: [],
        cityList: [],
        parentId: 0,
        cityNameT: '',

        agentUserId:'',//代理用户id
        baseKilometres:'',//基础公里数
        baseMoney:'',//基础价格
        unitOverMoney:'',//额外每公里价格(单位:元)
        nightMoney:'',//每公里费用(22:00~23:59)
        earlyMoney:'',//每公里费用(00:00~06:59)
        minuteMoney:'',//每分钟时长费(单位:元)
        pingRate:'',//平台抽成比例(0.1表示10%)
        riderRate:'',//师傅默认佣金比例
        agentTime:'',//设置|取消代理时间
        waitMinuteMoney:'',// 等待每分钟价格
        freeWaitTime:'',// 免费等待时长(分钟)
		isCover:0,
        dialogFormVisibleDl:false,
        dataForm: {
        	userName: ''
        },
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
      }
    },
    methods: {
      // 获取数据列表
      dataSelect() {
        this.tableDataLoading = true
        this.$http({
          url: this.$http.adornUrl('admin/cityInfo/getCityInfoList'),
          method: 'get',
          params: this.$http.adornParams({
            // 'page': this.page,
            // 'limit': this.limit,
            'parentId': 0,
            'cityName': this.cityNameT,
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            console.log('会员列表', data)
            this.tableDataLoading = false

            if (data.data.records.length > 0) {
              for (var i in data.data.records) {
                // data.data.records[i].name = data.data.records[i].cityName.split('省')
                if (data.data.records[i].hasChildren == 2) {
                  data.data.records[i].children = []
                  data.data.records[i].hasChildren = true
                } else {
                  data.data.records[i].hasChildren = false
                  //   data.data.records[i].children = []
                }
              }
            }
            let returnData = data.data;
            this.tableData = returnData;
            this.provinceList = returnData.records
            console.log(this.tableData)
            if (this.tableData.records.length == 0) {
              if (this.page > 1) {
                this.page = this.page - 1
                this.dataSelect()
              }
            }
          }

        })
      },
      //上传成功
      handleAvatarSuccess(file) {
        this.memberImg = file.data
      },
      // 刷新
      sxNotice() {
        this.page = 1
        this.dataSelect()
      },
      addNotice() {
        this.id = ''
        this.sort = ''
        this.isEnable = 1
        this.radio = 0
        this.cityName = ''
        this.provinceId = ''
        this.cityId = ''
        this.parentId = 0

         this.agentUserId = ''
         this.baseKilometres = ''
         this.baseMoney = ''
         this.unitOverMoney = ''
         this.nightMoney = ''
         this.earlyMoney = ''
         this.minuteMoney = ''
         this.pingRate = ''
         this.riderRate = ''
         this.waitMinuteMoney = ''
         this.freeWaitTime = ''
		 this.isCover = 0



        this.title = '添加'
        this.dialogFormVisible = true
      },
      handleCurrentChange(val) {
        this.page = val
        this.dataSelect()
      },
      handleSizeChange(val) {
        this.limit = val
        this.dataSelect()
      },
      // 添加
      addNoticeTo() {
        if (this.title == '添加') {
          if (this.radio == 1) {
            if (this.provinceId === '') {
              this.$notify({
                title: '提示',
                duration: 1800,
                message: '请选择省/直辖市',
                type: 'warning'
              });
              return
            }
            this.parentId = this.provinceId

          }
          if (this.radio == 2) {
            if (this.provinceId === '') {
              this.$notify({
                title: '提示',
                duration: 1800,
                message: '请选择省/直辖市',
                type: 'warning'
              });
              return
            }
            if (this.cityId === '') {
              this.$notify({
                title: '提示',
                duration: 1800,
                message: '请选择城市',
                type: 'warning'
              });
              return
            }
            this.parentId = this.cityId
          }
        }

        if (this.cityName == '') {
          this.$notify({
            title: '提示',
            duration: 1800,
            message: '请输入名称',
            type: 'warning'
          });
          return
        }
        if (this.title == '添加') {
          var url = 'admin/cityInfo/saveCityInfo'
        } else {
          var url = 'admin/cityInfo/saveCityInfo'
        }
        this.$http({
          url: this.$http.adornUrl(url),
          method: 'post',
          params: this.$http.adornParams({
          // data: this.$http.adornData({
            'isEnable': this.isEnable,
            'sort': this.sort,
            'cityName': this.cityName,
            'id': this.id,
            'parentId': this.parentId,
            'agentUserId': this.agentUserId,
            'baseKilometres': this.baseKilometres,
            'baseMoney': this.baseMoney,
            'unitOverMoney': this.unitOverMoney,
            'nightMoney': this.nightMoney,
            'earlyMoney': this.earlyMoney,
            'minuteMoney': this.minuteMoney,
            'pingRate': this.pingRate,
            'riderRate': this.riderRate,
            'waitMinuteMoney': this.waitMinuteMoney,
            'freeWaitTime': this.freeWaitTime,
			'isCover':this.isCover,


          })
        }).then(({
          data
        }) => {
          if (data.code == 0) {
            this.dialogFormVisible = false
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {

                this.dataSelect()
              }
            })
          } else {
            this.$message({
              message: data.msg,
              type: 'warning',
              duration: 1500,
              onClose: () => {}
            })
          }

        })
      },
      // 修改
      amendBanner(rows) {


        this.id = rows.id
        this.sort = rows.sort
        this.isEnable = rows.isEnable
        this.parentId = rows.parentId
        this.provinceId = ''
        this.cityId = ''
        this.cityName = rows.cityName
        this.sort = rows.sort

        this.agentUserId = rows.agentUserId
        this.baseKilometres = rows.baseKilometres
        this.baseMoney = rows.baseMoney
        this.unitOverMoney = rows.unitOverMoney
        this.nightMoney = rows.nightMoney
        this.earlyMoney = rows.earlyMoney
        this.minuteMoney = rows.minuteMoney
        this.pingRate = rows.pingRate
        this.riderRate = rows.riderRate

        this.waitMinuteMoney = rows.waitMinuteMoney
        this.freeWaitTime = rows.freeWaitTime
		this.isCover = rows.isCover


        this.title = '修改'
        this.dialogFormVisible = true
      },
      //删除
      deletes(row) {
        let delid = row.id
        this.$confirm(`确定删除此条信息?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: ''
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('admin/cityInfo/deleteCityInfoById'),
            method: 'post',
            params: this.$http.adornParams({
              'id': delid
            })
          }).then(({
            data
          }) => {
            if (data.code == 0) {
              this.$message({
                message: '删除成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.dataSelect()
                }
              })
            } else {
              this.$message({
                message: data.msg,
                type: 'warning',
                duration: 1500,
                onClose: () => {}
              })
            }

          })
        }).catch(() => {})
      },
      // 是否启用
      change2(val, row) {
        this.$http({
          url: this.$http.adornUrl('admin/cityInfo/updateEnable'),
          method: 'get',
          params: this.$http.adornParams({
            // data: this.$http.adornData({
            'id': row.id,
          })
        }).then(({
          data
        }) => {
          if (data.code == 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.dataSelect()
              }
            })
          } else {
            this.$message({
              message: data.msg,
              type: 'warning',
              duration: 1500,
              onClose: () => {
                this.dataSelect()
              }
            })
          }
        })
      },
      load(tree, treeNode, resolve) {
        console.log(tree.id, treeNode, '-----', resolve)
        this.$http({
          url: this.$http.adornUrl('admin/cityInfo/getCityInfoList'),
          method: 'get',
          params: this.$http.adornParams({
            'parentId': tree.id,
            'cityName': '',
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            if (data.data.records.length > 0) {
              for (var i in data.data.records) {
                if (data.data.records[i].hasChildren == 2) {
                  data.data.records[i].children = []
                  data.data.records[i].hasChildren = true
                } else {
                  data.data.records[i].hasChildren = false
                  //   data.data.records[i].children = []
                }
              }
            }
            let returnData = data.data;
            resolve(returnData.records);
            console.log('----', returnData.records)
            // if (this.tableData.records.length == 0) {
            //   if (this.page > 1) {
            //     this.page = this.page - 1
            //     this.dataSelect()
            //   }
            // }
          }

        })
      },
      select() {
        this.$http({
          url: this.$http.adornUrl('admin/cityInfo/getCityInfoList'),
          method: 'get',
          params: this.$http.adornParams({
            'parentId': this.provinceId,
            'cityName': '',
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            let returnData = data.data;
            this.cityList = returnData.records
          }

        })
      },
      // 设置代理弹框
      shezhiBtn(row){
        this.pageIndex = 1
        this.id = row.id
        this.getDataList()
        this.dialogFormVisibleDl = true
      },
      getDataList() {
      	this.dataListLoading = true
      	this.$http({
      		url: this.$http.adornUrl('sys/user/agentList'),
      		method: 'get',
      		params: this.$http.adornParams({
      			'page': this.pageIndex,
      			'limit': this.pageSize,
      			'username': this.dataForm.userName,
      			'province':'',
            'city':'',
            'isAgent':0,
      		})
      	}).then(({
      		data
      	}) => {
      		if (data && data.code === 0) {
      			this.dataList = data.data.records
      			this.totalPage = data.data.total
      		} else {
      			this.dataList = []
      			this.totalPage = 0
      		}
      		this.dataListLoading = false
      	})
      },
      // 每页数
      sizeChangeHandle(val) {
      	this.pageSize = val

      	this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
      	this.pageIndex = val
      	this.getDataList()
      },
      //设置代理
      querenshezhi(userId) {

          this.$http({
            url: this.$http.adornUrl('admin/cityInfo/setAgentCity'),
            method: 'get',
            params: this.$http.adornParams({
              'id': this.id,
              'userId':userId
            })
          }).then(({
            data
          }) => {
            if (data.code == 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.dialogFormVisibleDl = false
                  this.dataSelect()
                }
              })
            } else {
              this.$message({
                message: data.msg,
                type: 'warning',
                duration: 1500,
                onClose: () => {}
              })
            }

          })
      },
    },

    mounted() {
      this.dataSelect()
    }
  }
</script>

<style>
</style>
